<script>
import store from "../../store/index.js";
import request from "../../utils/Request.js";
import {ElMessage} from "element-plus";

export default {
  name: "AddProjectDialog",
  computed: {
    store() {
      return store
    }
  },
  data() {
    return {
      addProject: {
        name: '',
        description: '',
        isPrivate: 1,
      },
      rules: {
        name: [
          {
            validator: (rule, value, callback) => {
              if (!new RegExp("^[\u4e00-\u9fa5_a-zA-Z0-9-]+$").test(value))
                callback(new Error('请输入正确的名称，且不能包含除_-以外的字符！'))
              else
                callback()
            }
          }
        ],
        description: [
          {min: 0, max: 255, message: '简介长度在0到255之间', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value !== '' && !new RegExp("^[\u4e00-\u9fa5_a-zA-Z0-9-,.，。]+$").test(value))
                callback(new Error('请输入正确的名称，且不能包含除_-,.，。以外的字符！'))
              else
                callback()
            }
          }
        ]
      },
      disableCreateButton: false
    }
  },
  methods: {
    createProject() {
      let form = this.$refs['formRef']

      form.validate(isValid => {
        if (isValid) {
          this.disableCreateButton = true
          request({
            method: 'post',
            url: '/api/project/project/create',
            data: this.addProject
          })
              .then(resp => {
                let data = resp.data;
                if (data.code === 0) {
                  ElMessage.success('创建成功！刷新查看新知识库')
                  store.state.addProjectDialogVisible = false
                } else {
                  ElMessage.error(data.msg)
                }
                this.disableCreateButton = false
              })
              .catch(err => {
                ElMessage.error('未知错误，请重试')
                this.disableCreateButton = false
              })
        }
      })

    }
  }
}
</script>

<template>
  <el-dialog
      v-model="store.state.addProjectDialogVisible"
      title="创建知识库"
      width="30%"
      destroy-on-close
  >

    <el-form
        ref="formRef"
        :model="addProject"
        :rules="rules"
    >
      <el-form-item prop="name" label="知识库名称">
        <el-input v-model="addProject.name"
                  placeholder="知识库名称"
                  maxlength="64"/>
      </el-form-item>

      <el-form-item prop="description" label="知识库简介">
        <el-input v-model="addProject.description"
                  type="textarea"
                  placeholder="知识库简介"
                  show-word-limit
                  maxlength="255"/>
      </el-form-item>

      <el-form-item prop="isPrivate" label="知识库属性">
        <el-switch
            v-model="addProject.isPrivate"
            style="--el-switch-off-color: #13ce66"
            :active-value="1"
            :inactive-value="0"
            active-text="私有"
            inactive-text="公开"
            size="large"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="store.state.addProjectDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="createProject" :disabled="disableCreateButton">
        创建知识库
      </el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>